<template>
    <transition name="el-fade-in" @after-leave="_onAnimateLeaved">
        <div class="upload-window el-dialog card active" id="upload-window" v-show="visible" ref="upload-window" style="z-index: 2147483647;">
            <div class="el-dialog__header" v-drag="{ id: 'upload-window', offset: 5 }">
                <span class="el-dialog__title">文件上传列表</span>
                <button class="el-dialog__headerbtn" @click="visible = false;">
                    <i class="el-dialog__close el-icon el-icon-close"></i>
                </button>
            </div>
            <div class="el-dialog__body flex-column" style="position: relative;">
                <el-radio-group v-model="filter.selected" size="mini">
                    <el-radio-button v-for="(item, index) in filter.list" :key="`key-${index}`" :label="item.label">{{ item.text }}</el-radio-button>
                </el-radio-group>
                <div class="flex-1 margin-t-5" style="position: relative;">
                    <el-table :data="_filter(filter.selected)" class="flex-1 w-100" height="230" border size="mini">
                        <el-table-column prop="name" label="名称" :formatter="_4name"></el-table-column>
                        <el-table-column label="大小" width="80" :formatter="_4size" align="center"></el-table-column>
                        <el-table-column label="状态" width="80" align="center">
                            <template slot-scope="{ row }">
                                <el-tag :type="{ uploading: 'success', success: 'success', failed: 'danger', waiting: 'primary', pausing: 'primary', paused: 'primary', deleting: 'warning' }[row.status]">{{ _4StatusText(row) }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="90" align="center">
                            <template slot-scope="{ row: loader }">
                                <!-- 上传中、待传、暂停中时可见。处于暂停中状态时，禁用。 -->
                                <el-link v-if="['uploading', 'waiting', 'pausing'].includes(loader.status)" :disabled="loader.status == 'pausing'" type="info" class="action-item" @click="_2PauseUploadTask(loader)">暂停</el-link>

                                <!-- 暂停、删除中时可见。处于删除中状态时，禁用。 -->
                                <el-link v-if="['paused', 'deleting'].includes(loader.status)" :disabled="loader.status == 'deleting'" type="success" class="action-item" @click="_2StartUploadTask(loader)">继续</el-link>

                                <!-- 失败、删除中时可见。处于删除中状态时，禁用。 -->
                                <el-link v-if="['failed', 'deleting'].includes(loader.status)" :disabled="loader.status == 'deleting'" type="primary" class="action-item" @click="_2StartUploadTask(loader)">重试</el-link>

                                <!-- 失败、暂停、删除中时可见。处于删除中状态时，禁用。 -->
                                <el-link v-if="['failed', 'paused', 'deleting'].includes(loader.status)" :disabled="loader.status == 'deleting'" type="danger" class="action-item" @click="_2DeleteUploadTask(loader)">删除</el-link>

                                <el-link v-if="['success'].includes(loader.status)" type="danger" class="action-item" @click="_2DeleteUploadTask(loader)">删除记录</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
/**
 * 上传列表
 * @Author hedong [2022-02-24 11:01:57]
 * @Description 
 */
import UploadListItem from './upload-list-item';
import { mapActions, mapGetters } from 'vuex';

import FileUtil from './file.js';

export default {
    name: 'upload-list-dialog-copy',
    components: {
        [UploadListItem.name]: UploadListItem
    },
    props: {},

    data() {
        return {
            filter: {
                selected: 'all',
                list: [{
                    text: '全部', label: 'all'
                }, {
                    text: '待上传', label: 'waiting'
                }, {
                    text: '上传完成', label: 'success'
                }, {
                    text: '上传失败', label: 'failed'
                }]
            },
            visible: false,
            list: []
        }
    },

    computed: {
        /**
         * Store Getters
         */
        ...mapGetters({
            // 过滤数据
            _filter: 'upload-store/filter'
        }),

        /**
         * 格式化 size
         */
        _4size() {
            return function ({ size: bytes }) {
                return FileUtil.bytes2size(bytes);
            }
        },

        /**
         * 格式化 name
         */
        _4name() {
            return function ({ name, desc }) {
                return `[${desc}] - ${name}`
            }
        },

        /**
         * 状态文本内容
         */
        _4StatusText() {
            return function ({ status, progress }) {
                if (status == 'waiting') return '等待';
                if (status == 'uploading') return `${progress}%`;
                if (status == 'success') return '完成';
                if (status == 'failed') return '失败';
                if (status == 'pausing') return '正在暂停';
                if (status == 'paused') return '暂停';
                if (status == 'deleting') return '正在删除';
                return '未知';
            }
        }
    },

    methods: {
        /**
         * Store Actions
         */
        ...mapActions({
            // 暂停上传任务
            _2PauseUploadTask: 'upload-store/pause',
            // 开始/恢复上传任务
            _2StartUploadTask: 'upload-store/upload',
            // 删除上传任务
            _2DeleteUploadTask: 'upload-store/delete'
        }),

        /**
         * 淡出动画结束，移除组件
         */
        _onAnimateLeaved() {
            this.$el.remove();
        },
    }
}
</script>
<style lang="scss" scoped>
.upload-window.el-dialog {
    position: absolute !important;
    margin: 0 !important;
    right: 5px;
    bottom: 5px;
    width: 700px;
    height: 340px;
    z-index: 1000;

    box-sizing: content-box;

    display: flex;
    flex-direction: column;

    .el-dialog__header {
        cursor: move;
    }
    .el-dialog__body {
        flex: 1;
        box-sizing: border-box;
        margin-bottom: 2px;
        padding-bottom: 5px !important;
        border-bottom-color: transparent !important;

        .el-tag {
            padding: 0 !important;
            border: none !important;
            height: 14px;
            line-height: 14px;
        }

        .el-link.action-item {
            margin-right: 5px;
            &:last-child {
                margin-right: 0;
            }
            &.is-disabled {
                cursor: default;
            }
        }
    }

    /deep/.el-dialog__wrapper {
        position: relative;
        .upload-dialog {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            .el-dialog__header {
                padding: 0px !important;
                height: 30px !important;
                /* border: none;*/
            }
            .el-dialog__headerbtn {
                top: 0px !important;
                right: 3px !important;
            }
            .el-dialog__body {
                padding: 0px;
                border: none;
                max-height: 150px;
                overflow: auto;
            }
        }
        /deep/.v-modal {
            position: relative !important;
        }
    }
}
</style>